import Vue,{PropType,VNode,VueConstructor} from 'vue';
import MyKeepAlive,{CacheOperator} from '../my-keep-alive';
import './index.scss';
/**
 * 定义非响应数据
 * @property {Array<string|number>} panelNames	所有面板名称
 * @property {CacheOperator} cacheOperator		缓存操作对象
 */
export interface TabPanelsVue extends Vue{
	panelNames:Array<string|number>,
	cacheOperator:CacheOperator,
	enterActiveClass:String,
	leaveActiveClass:String,
}
/**
 * 标签面板
 * @author 唐国雄
 * @date 2021/8/7
 * 属性----------------------
 * v-model				当前活动的面板(TabPanel组件的name属性), string | number
 * :keep-alive			开启缓存, boolean
 * :animated			开启动画, boolean
 * :enter-class			默认的进入动画, string
 * :leave-class			默认的离开动画, string
 * :prev-enter-class	上一个的特殊进入动画, string
 * :prev-leave-class	上一个的特殊离开动画, string
 * :mode				动画模式, 'out-in' | 'in-out'
 * 事件----------------------
 * @shown		活动面板显示动画完成, string | number
 */
export default (Vue as VueConstructor<TabPanelsVue>).extend({
	name:'TabPanels',
	props:{
		//当前活动的面板
		value:{
			type:[String,Number],
			required:true,
		},
		//开启缓存
		keepAlive:Boolean,
		//开启动画
		animated:Boolean,
		//默认的进入动画
		enterClass:String,
		//默认的离开动画
		leaveClass:String,
		//上一个的特殊进入动画
		prevEnterClass:String,
		//上一个的特殊离开动画
		prevLeaveClass:String,
		//动画模式
		mode:String as PropType<'out-in'|'in-out'>,
	},
	watch:{
		value(val,old){
			val=this.panelNames.indexOf(val);
			old=this.panelNames.indexOf(old);
			if(val===-1||old===-1){
				this.enterActiveClass='';
				this.leaveActiveClass='';
			}else if(val>old){
				this.enterActiveClass=this.enterClass;
				this.leaveActiveClass=this.leaveClass;
			}else{
				this.enterActiveClass=this.prevEnterClass||this.enterClass;
				this.leaveActiveClass=this.prevLeaveClass||this.leaveClass;
			}
		},
	},
	created(){
		this.panelNames=[];
	},
	methods:{
		$_lexmis_afterEnter(){
			this.$emit('shown',this.value);
		},
	},
	render(h):VNode{
		const panels=this.$slots.default||[];
		const panelNames:Array<string|number>=panels.map((panel) => {
			// @ts-ignore
			return panel.componentOptions.propsData.name;
		});
		const reomves=this.panelNames.filter((name) => {
			return panelNames.indexOf(name)===-1;
		});
		if(reomves.length&&this.cacheOperator){
			for(let i=0;i<reomves.length;++i){
				this.cacheOperator.removeKey(reomves[i]);
			}
		}
		this.panelNames=panelNames;
		const showPanel=panels[panelNames.indexOf(this.value)];
		if(showPanel){
			showPanel.data!.key=showPanel.key=this.value;
		}else if(panels.length){
			this.$emit('input',panelNames[0]);
		}
		const content=this.keepAlive
			?h(MyKeepAlive,{
				on:{
					'cache-operator':(cacheOperator:CacheOperator) => {
						this.cacheOperator=cacheOperator;
					}
				}
			},[showPanel])
			:showPanel;
		return h('div',{
			staticClass:'lexmis-TabPanels',
		},[
			this.animated
				?h('transition',{
					props:{
						mode:this.mode,
						enterActiveClass:this.enterActiveClass,
						leaveActiveClass:this.leaveActiveClass,
					},
					on:{
						'after-enter':this.$_lexmis_afterEnter,
					}
				},[content])
				:content
		]);
	}
});
